import { lazy,Suspense } from 'react'
import {RouteObject,useRoutes,Navigate} from 'react-router-dom'

const Login=lazy(()=>import("../views/Login"))
const Home=lazy(()=>import("../views/Home"))
const React=lazy(()=>import("../views/React"))
const UploadPage=lazy(()=>import("../views/UploadPage"))
const NewsAdd=lazy(()=>import("../views/news/Add"))
const Red=lazy(()=>import("../views/Red"))
const Tree=lazy(()=>import("../views/Tree"))
const routes: RouteObject[] = [
    {
        path : '/',
        element: <Suspense fallback={<div>loadding</div>}><Home /></Suspense>,
    },
    {
        path : '/tree',
        element: <Suspense fallback={<div>loadding</div>}><Tree /></Suspense>,
    },
    {
        path : '/red',
        element: <Suspense fallback={<div>loadding</div>}><Red /></Suspense>,
    },
    {
        path : '/reg',
        element: <Navigate to='/login' />,
    },
    {
        path : '/login',
        element: <Suspense fallback={<div>loadding</div>}><Login /></Suspense>,
    },
    {
        path : '/upload',
        element: <Suspense fallback={<div>loadding</div>}><UploadPage /></Suspense>,
    },
    {
        path : '/react',
        element: <Suspense fallback={<div>loadding</div>}><React /></Suspense>,
    }
    ,
    {
        path : '/news/add',
        element: <Suspense fallback={<div>loadding</div>}><NewsAdd /></Suspense>,
    }
]

export default ()=>{


    return  useRoutes(routes);
}